<template>
  <div>

    <el-button type="primary" icon="el-icon-lx-add"  @click="dialogVisible = true">新建</el-button>
    <el-button type="primary" icon="el-icon-lx-add"  @click="flash">刷新</el-button>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
      :before-close="handleClose">

      <el-form :model="addRoomType" :rules="rules" ref="addRoomType" class="demo-ruleForm">

      <el-form-item label="房型名称" prop="type">
        <el-input v-model="addRoomType.type"></el-input>
      </el-form-item>

        <el-form-item label="房间价格" prop="price">
          <el-input v-model="addRoomType.price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoomType('addRoomType')">保 存</el-button>
  </span>
    </el-dialog>

    <br>
    <br>
  <el-table
    :data="roomTypeList"
    border>
    <el-table-column
      fixed
      prop="id"
      label="编号"
      >
    </el-table-column>
    <el-table-column
      prop="type"
      label="房间类型名称"
    >
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格(元)"
    >
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="getView(scope.row)" size="small">编 辑</el-button>
        <el-button type="danger" @click="removeRoomType(scope.row)" size="small">删 除</el-button>

      </template>
    </el-table-column>
  </el-table>


    <el-dialog
      title="提示"
      :modal="false"
      :visible.sync="viewDisable"
      width="30%"
      :before-close="handleClose">

      <el-form :model="roomTypeView" :rules="rules" ref="roomTypeView" class="demo-ruleForm">

      <el-form-item label="房型名称" prop="type">
        <el-input v-model="roomTypeView.type"></el-input>
      </el-form-item>

      <el-form-item label="房间价格" prop="price">
        <el-input v-model="roomTypeView.price"></el-input>
      </el-form-item>

        <hr>

        <el-form-item label="房型流览图" >
          <br>
          <el-row>
            <el-col :span="8"  v-for="(pic, index) in imageList">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="pic.image" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <el-button type="text" @click="removePic(pic.imageId)" class="button">删 除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
<!--          <span class="roomtype-image" v-for="(pic, index) in imageList">-->

        </el-form-item>

          <el-upload
            class="avatar-uploader"
            action="http://8.135.35.123:9000/hotelsystem/RoomType/uploadImg"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            multiple>
            <br>
            <i class="el-icon-plus avatar-uploader-icon">上传图片</i>
          </el-upload>





        <hr>
        <el-form-item label="房型详情图" >
          <br>
          <el-row>
            <el-col :span="8"  v-for="(pic, index) in viewList">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="pic.image" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <el-button type="text" @click="removePic(pic.imageId)" class="button">删 除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!--            <span class="roomtype-image" v-for="(pic, index) in viewList">-->
<!--            <el-image-->
<!--              class="roomtype-image"-->
<!--              :src="pic.image"-->
<!--              :preview-src-list="srcList2"-->
<!--            >-->
<!--            </el-image>-->
<!--              <div style="text-align: center;">-->
<!--                <el-button style="margin-top: 10px;" type="danger" @click="removePic(pic.id)" icon="el-icon-delete" circle></el-button>-->
<!--              </div>-->
<!--          </span>-->
        </el-form-item>

          <el-upload
            class="avatar-uploader"
            action="http://8.135.35.123:9000/hotelsystem/RoomType/uploadImg"
            :show-file-list="false"
            :on-success="uploadTypeOne"
            multiple>
            <br>
            <i class="el-icon-plus avatar-uploader-icon">上传图片</i>
          </el-upload>

      </el-form>




      <span slot="footer" class="dialog-footer">
    <el-button @click="viewDisable = false">取 消</el-button>
    <el-button type="primary" @click="modRoomType">保 存</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    methods: {
      removePic(id){
        var _this = this;
        this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/remove?id='+id).then(function (res) {
          if (res.data.code == 80200) {
            _this.getAllImageUrl(_this.roomTypeView.id);
            alert(res.data.msg);
          }else {
            alert(res.data.msg);
          }
        })
          },
      uploadTypeOne(res){
        this.imageUrl = res.data;
        var vo = new URLSearchParams()
        vo.append('imageUrl', this.imageUrl);
        vo.append('roomTypeId', this.roomTypeView.id);
        vo.append('type', 1);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/add',vo).then(function (res) {
          alert(res.data.msg);
          _this.getAllImageUrl(_this.roomTypeView.id);
        })
      },
      handleUploadSuccess(res) {
        this.imageUrl = res.data;
        var vo = new URLSearchParams()
        vo.append('imageUrl', this.imageUrl);
        vo.append('roomTypeId', this.roomTypeView.id);
        vo.append('type', 0);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/add',vo).then(function (res) {
          alert(res.data.msg);
          _this.getAllImageUrl(_this.roomTypeView.id);
        })
          },
      flash(){
        location.reload();
      },
      getView(row) {
        this.viewDisable = true;
        var _this = this;
        this.$http.post('http://8.135.35.123:9000/hotelsystem/RoomType/getView?id='+row.id).then(function (res) {
          if (res.data.code == 80200) {
            _this.roomTypeView = res.data.data;
            _this.getAllImageUrl(row.id);
            }else {
            alert(res.data.msg);
          }
        })
      },
      getAllImageUrl(id){
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/imageList?roomTypeId='+id+"&type="+0).then(function (res) {
          _this.imageList = res.data.data;
          _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/getUrlList?roomTypeId='+id+"&type="+0).then(function (res) {
            console.log(res);
            _this.srcList = res.data.data;
          })
        })
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/imageList?roomTypeId='+id+"&type="+1).then(function (res) {
          _this.viewList = res.data.data;
          _this.$http.post('http://8.135.35.123:9000/hotelsystem/roomTypeImage/getUrlList?roomTypeId='+id+"&type="+1).then(function (res) {
            console.log(res);
            _this.srcList2 = res.data.data;
          })
        })
      },
      removeRoomType(row){
        this.$http.post('http://8.135.35.123:9000/hotelsystem/RoomType/remove?id='+row.id).then(function (res) {
          if (res.data.code == 80200) {
            alert(res.data.msg);
            location.reload();
          }else {
            alert(res.data.msg);
          }
        })
      },
      saveRoomType(addRoomType){
        var _this = this;
        this.$refs[addRoomType].validate((valid) => {
          if (valid) {
            var vo = new URLSearchParams()
            vo.append('price', this.addRoomType.price);
            vo.append('type', this.addRoomType.type);
            this.$http.post('http://8.135.35.123:9000/hotelsystem/RoomType/add',vo).then(function (res) {
              if (res.data.code == 80200) {
                alert(res.data.msg);
                location.reload();
              }else {
                alert(res.data.msg);
              }
            })
          }
        });
      }
    },
    data() {
      return {
        imageUrl:'',
        viewList:[],
        imageList:[],
        srcList: [

        ],
        srcList2: [

        ],
        viewDisable:false,
        roomTypeView:{
          id:'',
          price:'',
          type:''
        },
        addRoomType:{
          price:'',
          type:''
        },
        rules: {
          type: [
            { required: true, message: '请输入房间类型名称', trigger: 'blur' },
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
          ]
        },
        dialogVisible:false,
        total:0,
        pages:1,
        size:10,
        currentPage:1,
        roomTypeList:[]
      }
    },
    created () {
      var _this = this;
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/RoomType/list?currentPage=1').then(function (res) {
        if(res.data.code==80200){
          _this.roomTypeList = res.data.data.records;
          _this.total = res.data.data.total;
          _this.pages = res.data.data.pages;
          _this.size = res.data.data.size;
          _this.currentPage = res.data.data.current;
        }
      })
    }
  }
</script>
<style>
  .roomtype-image {
    height: 150px;
    width: 150px;
    margin-left: 10px;
    float: left;
  }

  .time {
    font-size: 13px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    height: 150px;
    width: 100%;
    display: block;
  }
</style>
